<template>
  <div class="container">
    <h1 class="main-title">搜索收藏记录</h1>
    <el-input
      v-model="searchQuery"
      placeholder="请输入关键词搜索"
      class="search-input"
    >
      <template #append>
        <el-button type="primary">搜索</el-button>
      </template>
    </el-input>

    <div class="history-section">
      <div class="section-header">
        <h2>收藏历史</h2>
        <el-button type="text" class="menu-button">
          <i class="el-icon-menu"></i>
        </el-button>
      </div>
      <div class="history-list">
        <el-card
          v-for="(item, index) in historyItems"
          :key="index"
          class="history-item"
          @click.native="handleClick(item)"
        >
          <img :src="item.img" :alt="item.video_name" class="item-image" />
          <div class="item-content">
            <h3>{{ item.video_name }}</h3>
            <div class="item-tags">
              <el-tag
                v-for="(tag, tagIndex) in item.tags"
                :key="tagIndex"
                size="small"
              >
                {{ tag }}
              </el-tag>
            </div>
            <p>{{ item.brief_introduction }}</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElInput, ElButton, ElCard, ElTag } from 'element-plus'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchQuery = ref('')
const historyItems = ref([])

const fetchCollection = async () => {
  try {
    const response = await fetch('/collection', {
      method: 'GET',
    })
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    historyItems.value = data.map(item => ({
      ...item,
      img: item.img,
      tags: [item.category],
      title: item.video_name,
      description: item.brief_introduction,
    }))
  } catch (error) {
    console.error('Error fetching collection:', error)
  }
}

onMounted(() => {
  fetchCollection()
})

const handleClick = (item) => {
  router.push(`/videoshow/${item.video_id}`)
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.main-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.search-input {
  margin-bottom: 20px;
}

.history-section {
  margin-bottom: 40px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.menu-button {
  font-size: 20px;
  cursor: pointer;
}

.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.history-item {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.history-item:hover {
  transform: scale(1.05);
}

.item-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}

.item-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.item-tags {
  margin-bottom: 10px;
}

.item-tags .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>